@{
    Layout = null;
}

<div id="mediaApp" style="display:none;" v-on:dragover="handleScrollWhileDrag($event)">
    <div id="customdropzone">
        <h3>@T["Drop your media here"]</h3>
        <p>@T["Your files will be uploaded to the current folder when you drop them here"]</p>
    </div>

    <div class="alert message-warning" v-if="errors.length > 0">
        <ul> <li v-for="e in errors"> <p>{{e}}</p> </li> </ul>
    </div>

    <div id="mediaContainer" class="align-items-stretch">
        <div id="navigationApp" class="media-container-navigation m-0 p-0" v-cloak>
            <ol id="folder-tree">
                <folder :model="root" ref="rootFolder" :selected-in-media-app="selectedFolder" :level="1">
                </folder>
            </ol>
        </div>

        <div id="mediaContainerMain" class="pl-0 ml-4 mr-4" v-cloak>
            <div class="media-container-top-bar">
                <nav class="nav action-bar pb-2">
                    <div class="form-inline mr-auto">
                        <a href="javascript:;" class="btn btn-light btn-sm mr-2" v-on:click="selectAll">
                            @T["Select All"]
                        </a>
                        <a href="javascript:;" class="btn btn-light btn-sm mr-2" v-on:click="unSelectAll" :class="{disabled: selectedMedias.length < 1 }">
                            @T["Select None"]
                        </a>
                        <a href="javascript:;" class="btn btn-light btn-sm mr-2" v-on:click="invertSelection">
                            @T["Invert"]
                        </a>
                        <a href="javascript:;" class="btn btn-light btn-sm mr-2" v-on:click="deleteMediaList" :class="{disabled: selectedMedias.length < 1 }">
                            @T["Delete"] <span class="badge badge-pill badge-light" v-show="selectedMedias.length > 0">{{ selectedMedias.length}}</span>
                        </a>
                    </div>

                    <div class="nav-item">
                        <div class="media-filter">
                            <div class="input-group input-group-sm">
                                <span class="fa fa-filter icon-inside-input"></span>
                                <input type="text" id="media-filter-input" v-model="mediaFilter" class="form-control input-filter" placeholder="@T["Filter..."]" aria-label="@T["Filter..."]">
                                <div class="input-group-append">
                                    <button id="clear-media-filter-button" class="btn btn-outline-secondary" type="button" :disabled="mediaFilter == '' " v-on:click="mediaFilter = '' "><i class="fa fa-times"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-inline-flex ml-2 mr-3 mb-1 pt-1">
                        <div class="btn-group btn-group-sm">
                            <label for="fileupload" class="btn btn-sm btn-primary fileinput-button upload-button">
                                <input id="fileupload" type="file" name="files" multiple="multiple">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                                @T["Upload"]
                            </label>
                        </div>
                    </div>
                </nav>

                <nav id="breadcrumb" class="d-flex justify-content-end align-items-end pl-3 pr-3 mb-4">
                    <div class="breadcrumb-path">
                        <span class="breadcrumb-item" :class="{ active: isHome }"><a :href="isHome ? null : '#'" v-on:click="selectRoot">@T["Media Library"]</a></span>
                        <span v-for="(folder, i) in parents" v-cloak
                              class="breadcrumb-item"
                              :class="{active: parents.length - i == 1}">
                            <a :href="parents.length - i == 1 ? null : '#'" v-on:click="selectedFolder = folder;">{{ folder.name }}</a>
                        </span>
                    </div>
                    <div class="btn-group visibility-buttons" v-show="gridView">
                        <button type="button" id="toggle-thumbsize-button" class="btn btn-light btn-sm" :class="{selected: smallThumbs}" v-on:click="smallThumbs = true">
                            <span title="@T["Small Thumbs"]"><i class="fa fa-compress"></i></span>
                        </button>
                        <button type="button" id="toggle-thumbsize-button" class="btn btn-light btn-sm mr-2" :class="{selected: !smallThumbs}" v-on:click="smallThumbs = false">
                            <span title="@T["Large Thumbs"]"><i class="fa fa-expand"></i></span>
                        </button>
                    </div>
                    <div class="btn-group visibility-buttons">
                        <button type="button" id="toggle-grid-table-button" class="btn btn-light btn-sm" :class="{selected: gridView}" v-on:click="gridView = true">
                            <span title="@T["Grid View"]"><i class="fa fa-th-large"></i></span>
                        </button>
                        <button type="button" id="toggle-grid-table-button" class="btn btn-light btn-sm" :class="{selected: !gridView}" v-on:click="gridView = false">
                            <span title="@T["List View"]"><i class="fa fa-th-list"></i></span>
                        </button>
                    </div>
                </nav>
            </div>
            <div class="media-container-middle mb-2">
                <upload-list />

                <media-items-table :sort-by="sortBy" :sort-asc="sortAsc"
                                   :filtered-media-items="itemsInPage"
                                   :selected-medias="selectedMedias"
                                   :thumb-size="thumbSize"
                                   v-show="itemsInPage.length > 0 && !gridView"></media-items-table>

                <media-items-grid v-show="gridView"
                                  :filtered-media-items="itemsInPage"
                                  :selected-medias="selectedMedias"
                                  :thumb-size="thumbSize"></media-items-grid>

                <div class="alert-info pt-2 pb-2 pl-2 pr-2" v-show="mediaItems.length > 0 && filteredMediaItems.length < 1">@T["Nothing to show with this filter"]</div>
                <div class="alert-info pt-2 pb-2 pl-2 pr-2" v-show="mediaItems.length < 1">@T["This folder is empty"]</div>
            </div>
            <div v-show="filteredMediaItems.length > 0" class="media-container-footer pt-2">
                <pager :source-items="filteredMediaItems"> </pager>
            </div>
        </div>
    </div>
</div>

@* Endpoints *@
<input type="hidden" id="getFoldersUrl" value="@Url.Action("GetFolders", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="deleteFolderUrl" value="@Url.Action("DeleteFolder", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="createFolderUrl" value="@Url.Action("CreateFolder", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="getMediaItemsUrl" value="@Url.Action("GetMediaItems", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="deleteMediaUrl" value="@Url.Action("DeleteMedia", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="renameMediaUrl" value="@Url.Action("MoveMedia", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="deleteMediaListUrl" value="@Url.Action("DeleteMediaList", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="moveMediaListUrl" value="@Url.Action("MoveMediaList", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="uploadFiles" value="@Url.Action("Upload", "Admin", new { area = "OrchardCore.Media" })" />

@*Localizable Strings shared*@
<input type="hidden" id="deleteFolder" data-title="@T["Delete media folder"]" data-message="@T["Are you sure you want to delete this folder?"]" />
<input type="hidden" id="deleteMedia" data-title="@T["Delete media"]" data-message="@T["Are you sure you want to delete these media items?"]" />
<input type="hidden" id="moveMedia" data-title="@T["Move media"]" data-message="@T["Are you sure you want to move the selected media to this folder?"]" data-ok-text="@T["Yes"]" data-cancel-text="@T["No"]" data-ok-class="btn-success" />
<input type="hidden" id="sameFolderMessage" value="@T["The media is already on this folder"]" />
<input type="hidden" id="t-edit-button" value="@T["Edit"]" />
<input type="hidden" id="t-delete-button" value="@T["Delete"]" />
<input type="hidden" id="t-view-button" value="@T["View"]" />

@*Localizable Strings for uploadListcomponent*@
<input type="hidden" id="t-uploads" value="@T["Uploads"]" />
<input type="hidden" id="t-errors" value="@T["Errors"]" />
<input type="hidden" id="t-clear-errors" value="@T["Clear Errors"]" />

@*Localizable Strings for mediaItemsTableComponent*@
<input type="hidden" id="t-image-header" value="@T["Image"]" />
<input type="hidden" id="t-name-header" value="@T["Name"]" />
<input type="hidden" id="t-size-header" value="@T["Size"]" />
<input type="hidden" id="t-type-header" value="@T["Type"]" />

@*Localizable Strings for pagerComponent*@
<input type="hidden" id="t-pager-first-button" value="@T["First"]" />
<input type="hidden" id="t-pager-previous-button" value="@T["Previous"]" />
<input type="hidden" id="t-pager-next-button" value="@T["Next"]" />
<input type="hidden" id="t-pager-last-button" value="@T["Last"]" />
<input type="hidden" id="t-pager-page-size-label" value="@T["Page Size"]" />
<input type="hidden" id="t-pager-page-label" value="@T["Page:"]" />
<input type="hidden" id="t-pager-total-label" value="@T["Total items:"]" />

<div class="modal" id="createFolderModal" tabindex="-1" role="dialog" aria-labelledby="createFolderModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modelTitle">@T["Create Folder"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="input" class="form-control-label" id="input-label">@T["Folder name"]</label>
                    <input type="text" id="create-folder-name" class="form-control">
                </div>
                <div id="createFolderModal-errors"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="modalFooterOk">@T["Ok"]</button>
                <button type="button" class="btn btn-light" data-dismiss="modal">@T["Cancel"]</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="renameMediaModal" tabindex="-1" role="dialog" aria-labelledby="renameMediaModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modelTitle">@T["Rename Item"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="input" class="form-control-label" id="input-label">@T["New Name"]</label>
                    <input type="text" id="new-item-name" class="form-control">
                    <input type="hidden" id="old-item-name" value="">
                </div>
                <div id="renameMediaModal-errors"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="renameMediaModalFooterOk">@T["Ok"]</button>
                <button type="button" class="btn btn-light" data-dismiss="modal">@T["Cancel"]</button>
            </div>
        </div>
    </div>
</div>
